<script setup>
import { getPermissionPage, addPermission, updatePermission, deletePermission, updatePermissionStatus } from '@/api/auth'
import { getDateTimeStr } from '@/utils/formatDate'
// 每页展示数据条目
const PAGE_SIZE = 10
// 分页查询参数
const permissionPageMsg = ref({
  pageNum: 1,
  pageSize: PAGE_SIZE,
  permissionCode: null,
  permissionDesc: null,
  permissionName: null,
  createTimeStartAndEnd: [new Date(2024, 0, 1), new Date(2025, 0, 1)],
  status: null
})
// 分页查询结果
const permissionPageList = ref([])
// 分页查询条目总数
const permissionPageTotal = ref(0)
// 表格行选择器
const rowSelection = ref({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
})

// 进入页面后进行一次查询展示
onMounted(async () => {
  await getTableData()
})

// 展示的表格数据
const tableData = ref([])
// 把查询结果映射到表格
const resMsgToTableData = () => {
  tableData.value = []
  for (let i = 0; i < permissionPageList.value.length; i++) {
    const tempObj = {
      key: permissionPageList.value[i].id,
      tableIndex: i + 1 + PAGE_SIZE * (permissionPageMsg.value.pageNum - 1),
      permissionCode: permissionPageList.value[i].permissionCode,
      permissionName: permissionPageList.value[i].permissionName,
      permissionDesc: permissionPageList.value[i].permissionDesc,
      createTime: getDateTimeStr(permissionPageList.value[i].createTime),
      status: permissionPageList.value[i].status
    }
    tableData.value.push(tempObj)
  }
}

// 修改页码
const pageChange = async (pageNum) => {
  permissionPageMsg.value.pageNum = pageNum
  getTableData()
}

// 查询
const getTableData = async () => {
  const tempRes = await getPermissionPage(permissionPageMsg.value)
  permissionPageList.value = tempRes.list
  permissionPageTotal.value = +tempRes.total
  resMsgToTableData()
}
// 新增权限对话框可见状态
const addPermissionVisible = ref(false)
// 新增权限对话框表单数据
const addPermissionForm = ref({
  permissionCode: "",
  permissionDesc: "",
  permissionName: ""
})
// 新增权限表单元素
const addPermissionFormDom = ref()
// 对新增权限数据进行校验和赋值
const addPermissionBeforeOk = async () => {
  let isPass = true
  await addPermissionFormDom.value.validate().then(res => {
    if (res) {
      isPass = false
    }
  })
  return isPass
}
// 提交新增权限表单数据
const addPermissionOk = async () => {
  await addPermission(addPermissionForm.value)
  addPermissionFormDom.value.resetFields()
  addPermissionFormDom.value.clearValidate()
  await getTableData()
}
// 取消新增
const addPermissionCancel = () => {
  addPermissionFormDom.value.resetFields()
  addPermissionFormDom.value.clearValidate()
}

// 修改权限对话框可见状态
const updatePermissionVisible = ref(false)
// 修改权限对话框表单数据
const updatePermissionForm = ref({
  // 下面是需要提交的数据
  id: 0,
  permissionCode: "",
  permissionDesc: "",
  permissionName: "",
  status: 1,
  // 下面是初始数据，用于判断是否修改
  oldPermissionCode: "",
  oldPermissionDesc: "",
  oldPermissionName: "",
})
// 修改权限表单元素
const updatePermissionFormDom = ref()
// 弹出修改权限对话框
const updatePermissionModal = (data) => {
  updatePermissionForm.value.id = data.key
  updatePermissionForm.value.permissionCode = `${data.permissionCode}`
  updatePermissionForm.value.permissionDesc = data.permissionDesc
  updatePermissionForm.value.permissionName = data.permissionName
  updatePermissionForm.value.oldPermissionCode = `${data.permissionCode}`
  updatePermissionForm.value.oldPermissionDesc = data.permissionDesc
  updatePermissionForm.value.oldPermissionName = data.permissionName
  updatePermissionVisible.value = true
}
// 对修改权限数据进行校验和赋值
const updatePermissionBeforeOk = async () => {
  let isPass = true
  await updatePermissionFormDom.value.validate().then(res => {
    if (res) {
      isPass = false
    }
  })
  return isPass
}
// 提交修改权限表单数据
const updatePermissionOk = async () => {
  await updatePermission(updatePermissionForm.value)
  updatePermissionFormDom.value.resetFields()
  updatePermissionFormDom.value.clearValidate()
  await getTableData()
}
// 取消修改
const updatePermissionCancel = () => {
  updatePermissionFormDom.value.resetFields()
  updatePermissionFormDom.value.clearValidate()
}

// 开关修改状态
const switchChange = async (data) => {
  await updatePermissionStatus({
    id: data.key,
    status: data.status ? 0 : 1
  })
  data.status = data.status ? 0 : 1
}

// 删除权限对话框可见状态
const deletePermissionVisible = ref(false)

// 弹出删除权限对话框
const deletePermissionModal = (data) => {
  deletePermissionIds.value.push(data.key)
  deletePermissionVisible.value = true
}
// 删除权限的ids
const deletePermissionIds = ref([])
// 多选框选中的ids
const selectedPermissionIds = ref([])
// 批量删除
const deletePermissionBatch = () => {
  deletePermissionIds.value = selectedPermissionIds.value
  deletePermissionVisible.value = true
}
// 提交删除权限
const deletePermissionOk = async () => {
  await deletePermission(deletePermissionIds.value)
  deletePermissionIds.value = []
  await getTableData()
}
</script>

<template>
  <!-- 新增权限对话框 start -->
  <a-modal v-model:visible="addPermissionVisible" @ok="addPermissionOk"
    :on-before-ok="addPermissionBeforeOk" @cancel="addPermissionCancel" title="新增权限">
    <a-form :model="addPermissionForm" ref="addPermissionFormDom">
      <a-form-item field="permissionCode" label="权限编码"
        :rules="[{required:true,message:'权限编码不能为空'}]">
        <a-input v-model="addPermissionForm.permissionCode" placeholder="请输入权限编码" type="number" />
      </a-form-item>
      <a-form-item field="permissionDesc" label="权限描述"
        :rules="[{required:true,message:'权限描述不能为空'}]">
        <a-input v-model="addPermissionForm.permissionDesc" placeholder="请输入权限描述" />
      </a-form-item>
      <a-form-item field="permissionName" label="权限名称"
        :rules="[{required:true,message:'权限名称不能为空'}]">
        <a-input v-model="addPermissionForm.permissionName" placeholder="请输入权限名称" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 新增权限对话框 end -->
  <!-- 修改权限对话框 start -->
  <a-modal v-model:visible="updatePermissionVisible" @ok="updatePermissionOk"
    :on-before-ok="updatePermissionBeforeOk" @cancel="updatePermissionCancel" title="修改权限">
    <a-form :model="updatePermissionForm" ref="updatePermissionFormDom">
      <a-form-item field="permissionCode" label="权限编码"
        :rules="[{required:true,message:'权限编码不能为空'}]">
        <a-input v-model="updatePermissionForm.permissionCode" placeholder="请输入权限编码"
          type="number" />
      </a-form-item>
      <a-form-item field="permissionDesc" label="权限描述"
        :rules="[{required:true,message:'权限描述不能为空'}]">
        <a-input v-model="updatePermissionForm.permissionDesc" placeholder="请输入权限描述" />
      </a-form-item>
      <a-form-item field="permissionName" label="权限名称"
        :rules="[{required:true,message:'权限名称不能为空'}]">
        <a-input v-model="updatePermissionForm.permissionName" placeholder="请输入权限名称" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 修改权限对话框 end -->
  <!-- 删除权限对话框 start -->
  <a-modal v-model:visible="deletePermissionVisible" @ok="deletePermissionOk"
    @cancel="deletePermissionIds=[]" title="删除权限">
    <div>你确定要删除该权限吗</div>
  </a-modal>
  <!-- 删除权限对话框 end -->
  <a-layout class="layout-demo">
    <a-layout-header>
      <!-- 查询参数输入区 start -->
      <div class="box">
        <span class="my-span">权限编码</span>
        <a-input placeholder="请输入权限编码" allow-clear class="my-input"
          v-model="permissionPageMsg.permissionCode" />
      </div>
      <div class="box">
        <span class="my-span">权限名称</span>
        <a-input placeholder="请输入权限名称" allow-clear class="my-input"
          v-model="permissionPageMsg.permissionName" />
      </div>
      <div class="box">
        <span class="my-span">权限描述</span>
        <a-input placeholder="请输入权限描述" allow-clear class="my-input"
          v-model="permissionPageMsg.permissionDesc" />
      </div>
      <div class="box">
        <span class="my-span">创建时间</span>
        <a-range-picker class="my-input"
          style="width: 248px; border: 1px solid rgb(217, 217, 217); box-sizing: border-box;"
          v-model="permissionPageMsg.createTimeStartAndEnd" :value-format="'Date'" />
      </div>
      <div class="box">
        <a-button class="my-btn" type="outline" @click="getTableData">查询</a-button>
      </div>
      <div class="box">
        <a-button class="my-btn" type="outline"
          @click="addPermissionVisible=!addPermissionVisible">新增</a-button>
      </div>
      <!-- 查询参数输入区 end -->
    </a-layout-header>
    <a-layout-content>
      <!-- 信息展示表格 start -->
      <a-table :data="tableData" class="my-table" :pagination="false" :row-selection="rowSelection"
        v-model:selectedKeys="selectedPermissionIds">
        <template #columns>
          <a-table-column :align="'center'" title="序号" data-index="tableIndex" />
          <a-table-column :align="'center'" title="权限编码" data-index="permissionCode" />
          <a-table-column :align="'center'" title="权限名称" data-index="permissionName" />
          <a-table-column :align="'center'" title="权限描述" data-index="permissionDesc" />
          <a-table-column :align="'center'" title="创建日期" data-index="createTime" />
          <!-- 状态开关，0是停用，1是启用-->
          <a-table-column :align="'center'" title="状态">
            <template #cell="record">
              <a-switch :checked-value="1" :unchecked-value="0"
                :default-checked="record.record.status ? true : false"
                @change="switchChange(record.record)" :checked-text="'启用'" :unchecked-text="'停用'" />
            </template>
          </a-table-column>
          <!-- 修改操作和删除操作 -->
          <a-table-column :align="'center'" title="操作">
            <template #cell=record>
              <a-button type="outline" @click="updatePermissionModal(record.record)"
                style="margin-right:20px">修改</a-button>
              <a-button type="outline" @click="deletePermissionModal(record.record)">删除</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <!-- 信息展示表格 end -->
      <!-- 批量删除和分页器 -->
      <div>
        <a-button class="table-end-btn" type="outline"
          @click="deletePermissionBatch">批量删除</a-button>
        <a-pagination class="table-end-pagination" :total="permissionPageTotal"
          :page-size="PAGE_SIZE" @change="pageChange" />
      </div>
    </a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<style scoped>
.layout-demo :deep(.arco-layout-header) {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.layout-demo :deep(.arco-layout-header) .box {
  display: inline-block;
  margin: 12px 0;
}

.my-btn {
  margin-left: 12px;
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
}

.table-head-div {
  margin-top: 40px;
}

.my-table {
  margin: 64px 64px 0;
}

.table-end-btn,
.table-end-pagination {
  margin: 12px 64px;
}

.table-end-btn {
  float: left;
}

.table-end-pagination {
  float: right;
}

.my-span {
  margin: 0 12px;
}

.my-input {
  width: 128px;
  border: 1px solid #d9d9d9;
}
</style>